<template>
    <div class="apporvingSystem view-body">
      <!--<div class="btn-item">-->
        <!--逾期数据BTN-->
        <!--<select name="" id="" v-model="overdueDataType">-->
          <!--<option value="1">类型</option>-->
          <!--<option value="2">户数</option>-->
        <!--</select>-->
        <!--<select name="" id="" v-model="overdueDataTime">-->
          <!--<option value="1">日</option>-->
          <!--<option value="2">周</option>-->
          <!--<option value="3">月</option>-->
        <!--</select>-->
      <!--</div>-->
      <!--<div class="btn-item">-->
        <!--实收数据BTN-->
        <!--<select name="" id="" v-model="paidInDataType">-->
          <!--<option value="1">类型</option>-->
          <!--<option value="2">户数</option>-->
        <!--</select>-->
        <!--<select name="" id="" v-model="paidInDataTime">-->
          <!--<option value="1">日</option>-->
          <!--<option value="2">周</option>-->
          <!--<option value="3">月</option>-->
        <!--</select>-->
      <!--</div>-->
      <!--<div class="btn-item">-->
        <!--实收数据BTN-->
        <!--<select name="" id="" v-model="accountReceiveDataType">-->
          <!--<option value="1">类型</option>-->
          <!--<option value="2">户数</option>-->
        <!--</select>-->
        <!--<select name="" id="" v-model="accountReceiveDataTime">-->
          <!--<option value="1">日</option>-->
          <!--<option value="2">周</option>-->
          <!--<option value="3">月</option>-->
        <!--</select>-->
      <!--</div>-->
      <!--<hr>-->
      <!--<h1>主页信息{{consoleStatus}}</h1>-->
      <!--<hr>-->
      <!--<h1>overdueData{{overdueData}}</h1>-->
      <!--<hr>-->
      <!--<h1>paidInData{{paidInData}}</h1>-->
      <!--<hr>-->
      <!--<h1>accountReceiveData{{accountReceiveData}}</h1>-->

      <div class="apporMsg-wrapper">
        <div class="apporMsg-top">
          <div class="title"><span class="title-icon"></span><span class="text">数据统计</span></div>
          <div class="content">
            <div class="apporMsg-top-item">
              <div class="apporMsg">
                <div class="msg">
                  <div class="title">今日进单总量</div>
                  <div class="content">
                    <span class="text-blod">1800</span>
                    <span class="text-defult">/单</span>
                  </div>
                </div>
              </div>
              <div class="apporMsg" style="margin-right: 0">
                <div class="msg">
                  <div class="title">今日进单总量</div>
                  <div class="content">
                    <span class="text-blod">1800</span>
                    <span class="text-defult">单</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="approMsg-bottom">
          <div class="approMsg-bottom-item" >
            <div class="card" >
              <div class="title">实时单量完成情况</div>
              <div class="content" ref="chart"></div>
            </div>
          </div>
          <div class="approMsg-bottom-item" >
            <div class="card" style="margin: 16px 18px 0 18px">
              <div class="title">实时逾期率</div>
              <div class="content">
                <el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>
              </div>
            </div>
          </div>
          <div class="approMsg-bottom-item" >
            <div class="card" style="margin-right: 0;margin-left: 27px">
              <div class="title">实时通过率</div>
              <div class="content">
                <el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import axios from 'axios'
  import {getStorage} from "../../common/js/localStorage";
  import global from '../global'
  export default {
      name: "console",

      data(){
        return {
          consoleStatus:[],         //主页信息
          overdueData:[],           //逾期数据
          overdueDataType:1,        //逾期数据Type
          overdueDataTime:1,        //逾期数据Time
          paidInData:[],            //实收数据
          paidInDataType:1,         //实收数据type
          paidInDataTime:1,         //实收数据Time
          accountReceiveData:[],    //应收数据
          accountReceiveDataType:1, //应收数据Type
          accountReceiveDataTime:1, //应收数据Time
        }
      },
      created(){
        //进入调用获得页面主题信息方法
        this._getConsoleMsg()
        this._getOverdueData()
        this._getPaidInData()
        this._getAccountReceiveData()

      },
      methods:{
        /*@props
         * 绘制图表
         */
        _drewCharts(allOrderCount,approvalCount){
          console.log(allOrderCount+'________________'+approvalCount)
          // console.log(this.$echarts)
          //
          let passCount = approvalCount
          let unPassCount = allOrderCount - approvalCount
          let chart = this.$echarts.init(this.$refs['chart'])
          // console.log(chart)
          chart.setOption({
            tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              data: ['订单未完成','订单完成量']
            },
            series : [
              {
                name: '实时单量完成情况',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                selectedMode: 'single',
                label: {
                  normal: {
                    show: true,
                    position: 'inside',
                    formatter: '{d}%',//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比

                    textStyle : {
                      align : 'center',
                      baseline : 'middle',
                      fontFamily : '微软雅黑',
                      fontSize : 15,
                      fontWeight : 'bolder'
                    }
                  },
                },
                data:[
                  {value:unPassCount, name:'订单未完成'},
                  {value:passCount, name:'订单完成量'},
                ],
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          });
        },
        /*@props
         * 获取控制台信息
         */
        _getConsoleMsg(){
          let _this = this
          axios.get('http://'+global.$host+'/homePage/homePageData',
            {
              headers: {
                'Authorization': getStorage('Authorization')
              }
            }
          )
            .then(res => {
              if(res.status===global.ERR_OK){
                if(res.data.status===global.CUSTOM_ERR_OK){
                  let data = res.data.data
                  _this.consoleStatus = data;
                  //绘制图表
                  _this._drewCharts(data.allOrderCount,data.approvalCount)
                }
                // console.log(res)
              }else {
                return
              }
            })
            .catch(e => {
              console.log(e)
            })
        },
        /*@props
         * 获得逾期数据
         */
        _getOverdueData(){
          let _this = this
          axios.get('http://'+global.$host+'/homePage/getOverdueData?type='+_this.overdueDataType+'&time='+_this.overdueDataTime,
            {
              headers: {
                'Authorization': getStorage('Authorization')
              }
            }
          )
            .then(res => {
              if(res.status===global.ERR_OK){
                if(res.data.status===global.CUSTOM_ERR_OK){
                  let data = res.data.data
                  _this.overdueData = data;
                }
              }else {
                return
              }
            })
            .catch(e => {
              console.log(e)
            })
        },
        /*@props
         * 获得实收数据
         */
        _getPaidInData(){
          let _this = this
          axios.get('http://'+global.$host+'/homePage/getPaidInData?type='+_this.paidInDataType+'&time='+_this.paidInDataType,
            {
              headers: {
                'Authorization': getStorage('Authorization')
              }
            }
          )
            .then(res => {
              if(res.status===global.ERR_OK){
                if(res.data.status===global.CUSTOM_ERR_OK){
                  let data = res.data.data
                  _this.paidInData = data;
                }
              }else {
                return
              }
            })
            .catch(e => {
              console.log(e)
            })
        },
        /*@props
         * 获得应收数据
         */
        _getAccountReceiveData(){
          var _this = this
          axios.get('http://'+global.$host+'/homePage/getAccountReceiveData?type='+_this.accountReceiveDataType+'&time='+_this.accountReceiveDataTime,
            {
              headers: {
                'Authorization': getStorage('Authorization')
              }
            }
          )
            .then(res => {
              if(res.status===global.ERR_OK){
                if(res.data.status===global.CUSTOM_ERR_OK){
                  let data = res.data.data
                  _this.accountReceiveData = data;
                }
              }else {
                return
              }
            })
            .catch(e => {
              console.log(e)
            })
        }
      },
      mounted(){
        // console.log(this.consoleStatus)
        // this._drewCharts()
      },
      watch:{
        //监控数据参数变化调用请求数据方法渲染页面
        'overdueDataType'(){
          this._getOverdueData()
        },
        'overdueDataTime'(){
          this._getOverdueData()
        },
        'paidInDataType'(){
          this._getPaidInData()
        },
        'paidInDataTime'(){
          this._getPaidInData()
        },
        'accountReceiveDataType'(){
          this._getAccountReceiveData()
        },
        'accountReceiveDataTime'(){
          this._getAccountReceiveData()
        },
      }
    }
</script>

<style scoped lang="stylus">
  .apporvingSystem
    position absolute
    height 100%
    min-width 960px
    min-height 470px
    overflow hidden
    .apporMsg-wrapper
      margin 0 16px
      height 100%
      .apporMsg-top
        height 50%
        padding 0
        margin 0
        text-align left
        .title
          height 56px
          padding-left 16px
          line-height 56px
          font-size 16px
          position relative
          .title-icon
            position relative
            top 2px
            display inline-block
            height 18px
            width 18px
            background url("img/home.svg") no-repeat center /18px 18px
            margin-right 6px
          .text
            vertical-align bottom

        .content
          height calc(100% - 56px)
          .apporMsg-top-item
            display flex
            width 100%
            height 100%
            .apporMsg
              flex 1
              width 50%
              height 100%
              background linear-gradient(to bottom left, #1f8de4, #94d0f7)
              margin-right 16px
              border-radius 6px
              .msg
                position relative
                height 100%
                border-radius 6px
                width 100%
                background-image url("msg_bg.png")
                background-repeat no-repeat
                background-size 47% auto
                background-position 130% 30%
                .title,.content
                  color #ffffff
                .title
                  font-size 16px
                  position absolute
                  top 8px
                  left 8px
                  height auto
                  margin 0
                  padding 0
                  line-height 20px
                .content
                  position absolute
                  bottom 14px
                  right 40px
                  font-size 18px
                  height 101px
                  width 208px
                  .text-blod
                    font-size  80px
                    font-weight 700

      .approMsg-bottom
        display flex
        height 50%
        .approMsg-bottom-item
          width 20%
          flex 1
         .card
          height calc(100% - 16px)
          background #ffffff
          margin-right 36px
          margin-top 16px
          border-radius 6px
          .title
            height 44px
            border-bottom 1px solid #DFDFDF
            line-height 44px
            font-size 16px
            font-weight 500
            padding-left 20px
          .content
            height calc(100% - 44px)
            text-align center
            position relative
            .el-progress
              margin 0 auto
              position absolute
              top calc(50% - 63px)
              left calc(50% - 63px)
</style>
